<template>
  <div class="product-container padding-lr-20">


    <RouterLink v-for="item in list" :key="item.id" :to="{ name: 'ProductDetail', query: { id: item.id } }" custom
      v-slot="{ navigate, href }">
      <div class="item" @click="navigate" :href="href">
        <div class="img-container">
          <img class="img" :src="item.list_pic_url" alt="">
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="price">￥{{ item.retail_price }}</div>
      </div>
    </RouterLink>


  </div>
</template>
<script setup>
defineProps({
  list: {
    type: Array,
    required: true
  }
})
</script>
<style lang="scss" scoped>
@import '@/assets/common.scss';

.product-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 10;

  .item {
    .img-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 350px;
      height: 350px;
      background-color: #fff;

      .img {
        width: 310px;
        height: 310px;
      }
    }

    .name {
      @include textOverFlow;
      margin-top: 17px;
      width: 350px;
      font-family: PingFangSC-Medium;
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }

    .price {
      font-family: PingFangSC-Regular;
      font-size: 26px;
      color: #9E4242;
      letter-spacing: 0;
      font-weight: 400;
      margin-top: 5px;
      margin-bottom: 44px;
    }
  }
}
</style>